import "./g6.css";
import { wG6Render } from "@/hooks/graph";
import { mockData } from "@/mock/g6";
import { useEffect, useRef } from "react";

export function G6Render() {

  const containerRef = useRef('')

  useEffect(() => {
    if (containerRef.current) {
      let graphInstance2 = null
      for (let i = 1; i < 10; i++) {
        mockData.nodes.push({
          "label": "圆圈" + i,
          "id": String(i),
          "type": "structure"
        })
        mockData.edges.push({
          "label": "",
          "target": "CHN",
          "source": String(i)
        })
      }
      graphInstance2 = wG6Render({
        graphId: containerRef.current.id,
        graphInstance: graphInstance2,
        graphData: mockData,
        args: {},
        callback: {},
      });
    }
  }, [containerRef.current?.id])

  return (
    <div>
      <div className="g6box flex">
        <div ref={containerRef} id="container" className="container"></div>
      </div>
    </div>
  );
}
